<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bar</title>
    <script src="../echarts.min.js"></script>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 100%; height: 500px"></div>

    <script>
        // 基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图标的配置项和数据
        let baseLegend = {
            orient: 'vertical',
            top: '0',
            left: '37%',
            // width: 183,
            borderColor: '#1465A6',
            borderWidth: 2,
            borderRadius: 2,
            padding: 20,
            itemWidth: 30,
            // itemHeight: 30,
            itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
            textStyle: {
                color: '#fff'
            },
            data: ['1#','2#','3#','4#']
        }
        option = {
            // color: ['#5554FF', '#60E960', '#FF9E33', '#FFD82E'],
            textStyle: {
                color: '#fff'
            },
            grid: [
                {
                    top: '10%',
                    left: '4%',
                    right: '55%',
                    bottom: '10%',
                },{
                    top: '10%',
                    left: '54%',
                    right: '5%',
                    bottom: '10%',
                },
                // {x: '7%', y: '7%', width: '40%', height: '70%'},
                // {x2: '5%', y: '7%', width: '40%', height: '70%'},
            ],
            // tooltip: {
            //     formatter: 'Group {a}: ({c})'
            // },
            // 图例
            legend: [
                {
                    orient: 'vertical',
                    top: '0',
                    right: '52%',
                    // width: 183,
                    borderColor: '#1465A6',
                    borderWidth: 2,
                    borderRadius: 2,
                    padding: 20,
                    itemWidth: 30,
                    // itemHeight: 30,
                    itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
                    textStyle: {
                        color: '#fff'
                    },
                    data: ['1#','2#','3#','4#']
                },
                {
                    // z: 3,
                    orient: 'vertical',
                    top: '0',
                    right: '2%',
                    // width: 183,
                    borderColor: '#1465A6',
                    borderWidth: 2,
                    borderRadius: 2,
                    padding: 20,
                    itemWidth: 30,
                    // itemHeight: 30,
                    itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
                    textStyle: {
                        color: '#fff'
                    },
                    // selectedMode: 'single',
                    // inactiveColor: '#ccc',
                    data: ['1#','2#','3#','4#']
                }
            ],
            
            xAxis: [
                {
                    gridIndex: 0,
                    name: '风速(M/S)',
                    nameLocation: 'center', // 坐标轴名称显示位置。
                    nameGap: 40, //坐标轴名称与轴线之间的距离 15
                    // type: 'category',
                    axisLine: {
                        lineStyle: {
                            // color: 'rgba(43, 176, 217, 1)'
                            color: '#153E6A'
                        }
                    },
                    // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                    // boundaryGap: ['70%', '70%'],
                    boundaryGap: false,
                    data: [0, 5, 10, 15, 20, 25]
                },
                {
                    gridIndex: 1, 
                    name: '风速(M/S)',
                    nameLocation: 'center', // 坐标轴名称显示位置。
                    nameGap: 40, //坐标轴名称与轴线之间的距离 15
                    // type: 'category',
                    axisLine: {
                        lineStyle: {
                            // color: 'rgba(43, 176, 217, 1)'
                            color: '#153E6A'
                        }
                    },
                    // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                    // boundaryGap: ['70%', '70%'],
                    boundaryGap: false,
                    data: [0, 5, 10, 15, 20, 25]
                },
            ],
            yAxis: [
                {
                    gridIndex: 0,
                    name: '风速概率(%)',
                    type: 'value',
                    // 坐标轴在 grid 区域中的分隔线。
                    splitLine: {
                        // show: false,
                        lineStyle: {
                            color: 'rgba(43, 176, 217, 0.3)',
                            type: 'dashed'

                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(43, 176, 217, 0.3)'
                        }
                    },
                    splitLine: {
                        // show: false,
                        lineStyle: {
                            color: '#50708F',
                            type: 'dashed'
                        }
                    },
                },
                {
                    gridIndex: 1,
                    name: '风能概率(%)',
                    type: 'value',
                    // 坐标轴在 grid 区域中的分隔线。
                    splitLine: {
                        // show: false,
                        lineStyle: {
                            color: 'rgba(43, 176, 217, 0.3)',
                            type: 'dashed'

                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(43, 176, 217, 0.3)'
                        }
                    },
                    splitLine: {
                        // show: false,
                        lineStyle: {
                            color: '#50708F',
                            type: 'dashed'
                        }
                    },
                },
            ],
            series: [
                {
                    name: '#1',
                    type: 'line',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: ['20', '50', '80', '10', '100', '8']
                },
                {
                    name: '2#',
                    type: 'line',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: ['15', '22', '66', '87', '34', '6']
                },
                {
                    name: '1#',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: ['20', '50', '80', '10', '100', '8']
                },{
                    name: '3#',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: ['15', '22', '66', '87', '6', '6']
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>
</html>